<template>
	<nav-header :title="'通知列表(' + data.pageTotal + ')'">
		<my-page ref="mypage" v-model="dataList" :height="system.screenHeight - system.statusBarHeight" :contentClass="['pt-4', 'px-4']" @load-data="loadData">
			<template slot="content">
				<view v-for="(item,index) in dataList" :key="index" class="bg-white mb-4 p-4 rounded-lg shadow-lg" 
					@click="$util.myNavigateTo('/pages_mine/notice_detail?id=' + item.id)">
					<view class="flex items-center text-black-32 mb-3">
						<u-icon name="volume" color="#999999" size="20"></u-icon>
						<text class="pl-2 zx-ellipsis text-lg" v-text="item.title"></text>
					</view>
					<view class="flex justify-between text-gray-99">
						<text v-text="$util.getFormatDate(item.createTime)"></text>
						<text :class="{'text-red-500': item.readStatus == '1'}" v-text="item.readStatus == '0'? '未读':'已读'"></text>
					</view>
				</view>
			</template>
		</my-page>
	</nav-header>
</template>

<script>
	import {mapState} from 'vuex'
	import MyPage from '@/components/my_page.vue'
	import NavHeader from '@/components/nav_header.vue'
	import * as noticeApi from '@/interface/junchuang/notice.js'
	import MescrollPageMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-page.js"
	export default {
		mixins: [MescrollPageMixin],
		components: {
			NavHeader,MyPage
		},
		data() {
			return {
				dataList: [],
				data: {pageTotal: 0},
			}
		},
		computed: {
			...mapState({
				system: state => state.system
			})
		},
		onPullDownRefresh () {
			this.$refs['mypage'].dataReload()
			uni.stopPullDownRefresh()
		},
		methods: {
			loadData(page, success, error){
				const v = this;
				Object.assign(v.data, page, {sendType: '0'})
				noticeApi.getNoticePageList(v.data).then(res=>{
					v.data.pageTotal = res.data.total || 0
					success(res)
				}).catch(error)
			},
		}
	}
</script>

<style>
	page{
		background-color: #f7f7f7;
	}
</style>
